<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{css/admin-courseManage.css}"/>
    <link rel="stylesheet"  th:href="@{css/oksub.css}">
    <script type="text/javascript"  th:src="@{lib/loading/okLoading.js}"></script>
</head>
<body>

<input hidden="hidden" id="judgeQuery" value="0">



<div class="container" style="margin-top: 20px;margin-bottom: 20px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="btn-group" role="group" aria-label="..." style="margin: auto;">
                <!-- 实现用户添加按钮 -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">
                    课程添加
                </button>
                <!-- 实现用户精确查询按钮 -->
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#query">
                    精确查询
                </button>
            </div>
        </div>
        <div class="col-sm-4"></div>

        <div class="col-sm-4">
            <div class="input-group">
                <input type="text" id="likeValue" class="form-control" placeholder="只需填写部分名称、教练名、场所名">
                <span class="input-group-btn">
			        <button class="btn btn-default" type="button" id="likeQuery">查询</button>
			      </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div>
</div>

<!-- 课表添加model -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">请填写信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row" >
                        <div class="col-sm-6">
                            <img id="pic" src="images/feature-thumb1.png">
                            <input id="upload" name="file" accept="images/*" type="file" style="display: none"/>
                            <input type="hidden" id="fileName"  value="feature-thumb1.png"/>
                            <p style="font-size: 18px;">点击图片更改当前图片<Strong style="color: green;"></Strong>,若取消当前上传请点击
                                <em onclick="stopUpload()" style="color: red;">取消</em></p>
                        </div>
                        <div class="col-sm-6" id="addRow">
                            <div class="input-group">
                                <span class="input-group-addon">课程名称</span>
                                <input type="text" class="form-control" id="addcourseName" placeholder="请填写" style="" >
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">教师名称</span>
                                <input type="text" class="form-control" id="addcourseTeacher" placeholder="请填写" style="" >
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">课程类型</span>
                                <select type="text" class="form-control" id="addcourseMold" >
                                    <option>公共课</option>
                                    <option>增肌课</option>
                                    <option>减脂课</option>
                                    <option>康复课</option>
                                    <option>特色课</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" >时间</span>
                                <select type="text" class="form-control" id="addcourseWeek">
                                    <option value="1">周一</option>
                                    <option value="2">周二</option>
                                    <option value="3">周三</option>
                                    <option value="4">周四</option>
                                    <option value="5">周五</option>
                                    <option value="6">周六</option>
                                    <option value="7">周日</option>
                                    <option value="8">每周任意</option>
                                </select>
                                <select type="text" class="form-control" id="addcourseSchooltime">
                                    <option value="当天任意">当天任意</option>
                                    <option value="08:00">08:00</option>
                                    <option value="08:30">08:30</option>
                                    <option value="09:00">09:00</option>
                                    <option value="09:30">09:30</option>
                                    <option value="10:00">10:00</option>
                                    <option value="10:30">10:30</option>
                                    <option value="11:00">11:00</option>
                                    <option value="11:30">11:30</option>
                                    <option value="13:00">13:00</option>
                                    <option value="13:30">13:30</option>
                                    <option value="14:00">14:00</option>
                                    <option value="14:30">14:30</option>
                                    <option value="15:00">15:00</option>
                                    <option value="15:30">15:30</option>
                                    <option value="16:00">16:00</option>
                                    <option value="16:30">16:30</option>
                                    <option value="17:00">17:00</option>
                                    <option value="17:30">17:30</option>
                                    <option value="18:00">18:00</option>
                                    <option value="18:30">18:30</option>
                                    <option value="19:00">19:00</option>
                                    <option value="19:30">19:30</option>
                                    <option value="20:00">20:00</option>
                                    <option value="20:30">20:30</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" >课程类型</span>
                                <select type="text" class="form-control" id="addcourseVenue" >
                                    <option value="无氧区">无氧区</option>
                                    <option value="瑜伽房">瑜伽房</option>
                                    <option value="操课房">操课房</option>
                                    <option value="武术房">武术房</option>
                                    <option value="有氧区">有氧区</option>
                                    <option value="单车房">单车房</option>
                                    <option value="私教区">私教区</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" >课程价格</span>
                                <input type="text" class="form-control" id="addcoursePrice" placeholder="请填写数字" style="">
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addCourse">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- 精确查询model -->
<div class="modal fade" id="query" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1" style="text-align: center;">请做出您的选择</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group"  id="queryFormItem1">
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qcname" value="课程名称"   readonly="readonly">
                            <input type="hidden" id="qcnameValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qteacher" value="教练名称"  readonly="readonly">
                            <input type="hidden" id="qteacherValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qvenue" value="教学地点"   readonly="readonly">
                            <input type="hidden" id="qvenueValue" value="0"/>
                        </div>
                    </div>
                    <div class="form-group" id="queryFormItem2">
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qmold" value="课程类型"   readonly="readonly">
                            <input type="hidden" id="qmoldValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qtime" value="准确时间"  readonly="readonly">
                            <input type="hidden" id="qtimeValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qweek" value="教学星期"   readonly="readonly">
                            <input type="hidden" id="qweekValue" value="0"/>
                        </div>
                    </div>
                    <div class="form-group" id="queryFormItem3">
                        <div class="col-sm-4">
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="qprice" value="价格区间"   readonly="readonly">
                            <input type="hidden" id="qpriceValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qcnameDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >课程名称</span>
                            <input type="text" class="form-control" placeholder="填写一部分也能查询" id="divcname" >
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qteacherDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >教练名称</span>
                            <input type="text" class="form-control" placeholder="填写一部分也能查询" id="divteacher" >
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qvenueDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >教学地点</span>
                            <select type="text" class="form-control"  id="divvenue" >
                                <option value="无氧区">无氧区</option>
                                <option value="瑜伽房">瑜伽房</option>
                                <option value="操课房">操课房</option>
                                <option value="武术房">武术房</option>
                                <option value="有氧区">有氧区</option>
                                <option value="单车房">单车房</option>
                                <option value="私教区">私教区</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qmoldDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >课程类型</span>
                            <select type="text" class="form-control" placeholder="填写一部分也能查询" id="divmold" >
                                <option>公共课</option>
                                <option>增肌课</option>
                                <option>减脂课</option>
                                <option>康复课</option>
                                <option>特色课</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qweekDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >教学星期</span>
                            <select type="text" class="form-control" placeholder="填写一部分也能查询" id="divweek" >
                                <option value="1">周一</option>
                                <option value="2">周二</option>
                                <option value="3">周三</option>
                                <option value="4">周四</option>
                                <option value="5">周五</option>
                                <option value="6">周六</option>
                                <option value="7">周日</option>
                                <option value="8">每周任意</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qtimeDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >准确时间</span>
                            <select type="text" class="form-control" placeholder="填写一部分也能查询" id="divtime" >
                                <option value="当天任意">当天任意</option>
                                <option value="08:00">08:00</option>
                                <option value="08:30">08:30</option>
                                <option value="09:00">09:00</option>
                                <option value="09:30">09:30</option>
                                <option value="10:00">10:00</option>
                                <option value="10:30">10:30</option>
                                <option value="11:00">11:00</option>
                                <option value="11:30">11:30</option>
                                <option value="13:00">13:00</option>
                                <option value="13:30">13:30</option>
                                <option value="14:00">14:00</option>
                                <option value="14:30">14:30</option>
                                <option value="15:00">15:00</option>
                                <option value="15:30">15:30</option>
                                <option value="16:00">16:00</option>
                                <option value="16:30">16:30</option>
                                <option value="17:00">17:00</option>
                                <option value="17:30">17:30</option>
                                <option value="18:00">18:00</option>
                                <option value="18:30">18:30</option>
                                <option value="19:00">19:00</option>
                                <option value="19:30">19:30</option>
                                <option value="20:00">20:00</option>
                                <option value="20:30">20:30</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group divStyle" id="qpriceDiv" >
                        <div class="input-group">
                            <span class="input-group-addon" >价格区间</span>
                            <input type="text" style="width: 45%;" class="form-control" placeholder="请填写准确数字" id="divpriceStart" >
                            <span>&nbsp;&nbsp;-&nbsp;-&nbsp;-&nbsp;&nbsp;</span>
                            <input type="text" style="width: 45%;float: right;" class="form-control" placeholder="请填写准确数字" id="divpriceEnd" >
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="bestQuery"  data-dismiss="modal">查询</button>
            </div>
        </div>
    </div>
</div>

<!-- 更新课程信息model -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2" style="text-align: center;">请修改课程信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row" >
                        <div class="col-sm-6">
                            <input hidden="hidden" id="courseId" />
                            <p>&nbsp;</p>
                            <img src="" id="courseSample"  width="100%" height="100%"/>
                        </div>
                        <div class="col-sm-6" id="updateRow">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1">课程名称</span>
                                <input type="text" class="form-control" id="courseName" placeholder="课程名称" style="" aria-describedby="basic-addon1">
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon2">教师名称</span>
                                <input type="text" class="form-control" id="courseTeacher" placeholder="教师名称" style="" aria-describedby="basic-addon2">
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon3">课程类型</span>
                                <select type="text" class="form-control" id="courseMold" aria-describedby="basic-addon3">
                                    <option>公共课</option>
                                    <option>增肌课</option>
                                    <option>减脂课</option>
                                    <option>康复课</option>
                                    <option>特色课</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon4">时间</span>
                                <select type="text" class="form-control" id="courseWeek" aria-describedby="basic-addon4">
                                    <option value="1">周一</option>
                                    <option value="2">周二</option>
                                    <option value="3">周三</option>
                                    <option value="4">周四</option>
                                    <option value="5">周五</option>
                                    <option value="6">周六</option>
                                    <option value="7">周日</option>
                                    <option value="8">每周任意</option>
                                </select>
                                <select type="text" class="form-control" id="courseSchooltime" aria-describedby="basic-addon4">
                                    <option value="当天任意">当天任意</option>
                                    <option value="08:00">08:00</option>
                                    <option value="08:30">08:30</option>
                                    <option value="09:00">09:00</option>
                                    <option value="09:30">09:30</option>
                                    <option value="10:00">10:00</option>
                                    <option value="10:30">10:30</option>
                                    <option value="11:00">11:00</option>
                                    <option value="11:30">11:30</option>
                                    <option value="13:00">13:00</option>
                                    <option value="13:30">13:30</option>
                                    <option value="14:00">14:00</option>
                                    <option value="14:30">14:30</option>
                                    <option value="15:00">15:00</option>
                                    <option value="15:30">15:30</option>
                                    <option value="16:00">16:00</option>
                                    <option value="16:30">16:30</option>
                                    <option value="17:00">17:00</option>
                                    <option value="17:30">17:30</option>
                                    <option value="18:00">18:00</option>
                                    <option value="18:30">18:30</option>
                                    <option value="19:00">19:00</option>
                                    <option value="19:30">19:30</option>
                                    <option value="20:00">20:00</option>
                                    <option value="20:30">20:30</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon5">训练地区</span>
                                <select type="text" class="form-control" id="courseVenue" aria-describedby="basic-addon5">
                                    <option value="无氧区">无氧区</option>
                                    <option value="瑜伽房">瑜伽房</option>
                                    <option value="操课房">操课房</option>
                                    <option value="武术房">武术房</option>
                                    <option value="有氧区">有氧区</option>
                                    <option value="单车房">单车房</option>
                                    <option value="私教区">私教区</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon6">课程价格</span>
                                <input type="text" class="form-control" id="coursePrice" placeholder="课程价格" style="" aria-describedby="basic-addon6">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateCourse"  data-dismiss="modal">更新</button>
            </div>
        </div>
    </div>
</div>



<!-- 表格信息 -->
<div class="table-responsive container-fluid">
    <table  id="courseTable" cellspacing="1" cellpadding="0" class="table table-hover col-sm-12">
        <tr>
            <th>名称</th>
            <th>类型</th>
            <th>时间</th>
            <th>教练</th>
            <th>地点</th>
            <th>价格</th>
            <th>点击量</th>
            <th>预约量</th>
            <th>更新</th>
            <th>删除</th>
        </tr>
    </table>
</div>
<!-- 翻页信息 -->
<div id="pagination">
    <div class="row">
        <div class="col-sm-3" style="padding-top: 23px;">
            <button class="btn btn-default disabled">
                共 <span class="badge" id="pages">5</span>页
            </button>
        </div>
        <div class="col-sm-3" style="padding-top: 23px;"

        >
            <button class="btn btn-default disabled">
                共 <span class="badge" id="total">5</span>条数据
            </button>
        </div>
        <div class="col-sm-6">
            <nav aria-label="Page navigation" >
                <ul class="pagination">
                    <li class="previous" onclick="nextPage(1);">
                        <a href="javascript:;">
                            <span aria-hidden="true">&larr;</span> 首页
                        </a>
                    </li>
                    <li onclick="nextPage(2);">
                        <a href="javascript:;" aria-label="Previous" >
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="javascript:;">
                            <span id="one">1</span>
                        </a>
                    </li>
                    <li onclick="nextPage(3);">
                        <a href="javascript:;" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="next" onclick="nextPage(0);"><a href="javascript:;">尾页
                        <span aria-hidden="true">&rarr;</span></a>
                        <input type="hidden" value="20" id="pageEnd"/>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<!--提示框-->
<div id="info">
    <span id="msg"></span>
</div>

</body>
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{js/admin-courseManage.js}"></script>
</html>